<template>
  <div class="p-[16px] bg-[var(--base-color)]" style="height: calc(100% - 8px)">
    <vxe-grid ref="tableRef" v-bind="tableOptions" class="log-table" />
  </div>
</template>

<script setup lang="jsx">
import { onMounted } from "vue"

import { getBusinessLog } from "@/api/public.js"
const tableRef = ref()
const params = ref({})

const props = defineProps({
  api: { type: Function, default: () => [] },
})
const router = useRouter()
const { id } = router.currentRoute.value.query || {}
onMounted(() => {})

const isArray = (e) => {
  return Object.prototype.toString.call(e) === "[object Array]"
}

const tableOptions = reactive({
  height: "auto",
  border: "inner",
  pagerConfig: { pageSize: 10 },
  columns: [
    { field: "create_user", title: "操作人", width: 200 },
    { field: "created_at", title: "操作时间", width: 200 },
    {
      field: "op_content",
      title: "处理事项",
      minWidth: 300,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {isArray(row.content)
                ? row.content.map((n) => (
                    <div>
                      <span class="mr-[4px] min-w-[80px] inline-block">{n.label}</span>
                      <span>{n.new}</span>
                    </div>
                  ))
                : row.content}
            </div>
          )
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: true, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page }) => {
        let pages = {
          pageNum: page.currentPage,
          pageSize: page.pageSize,
        }
        return getBusinessLog({ ...pages, business_id: id, tag: "order" })
      },
    },
  },
})
</script>
